<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="item.label" :name="item.name" v-for="item in menuArr">
      </el-tab-pane>
    </el-tabs>
    <div class="remote-content">
      <keep-alive>
        <component :is="activeName"></component>
      </keep-alive>
    </div>
  </div>
</template>
<script>
  import remoteConfigAgents from './remoteControlAgents'
  import remoteConfigSatifaction from './remoteControlConfig'
  import {isHasMenu} from '@/utils/m7Utils'
  export default {
    name: 'remote',
    data () {
      return {
        activeName: '',
        menuArr: [
          {name: 'remoteConfigAgents', label: this.$t('callServiceSkillGroup.callServiceSkillGroup42'), id: 'exten_allocation'},
          {name: 'remoteConfigSatifaction', label: this.$t('configTabTitle.satisfactionConfig'), id: 'satisfaction_config'}
        ]
      }
    },
    computed: {
    },
    components: {
      remoteConfigAgents,
      remoteConfigSatifaction
    },
    methods: {
      handleClick (tab) {
        this.activeName = tab.name
      }
    },
    beforeMount () {
      this.menuArr = this.menuArr.filter((item) =>{
        if (item.id) {
          return isHasMenu(item.id, this.$store.state.session.user)
        }
        return true
      })
      this.activeName = this.menuArr[0] && this.menuArr[0].name
    }
  }
</script>
<style lang="stylus" scoped>
  .remote-content
    height calc(100% - 36px)
    overflow-y auto
</style>
